<template>
    <div class="com_box over_box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="flexbox flexcenter flexbetween meta_head">
            <div class="flexbox flexcenter">
                <img src="../../assets/img/pot_picture.svg" alt="" width="40">
                <span class="video_name">{{file_name}}</span>
            </div>
            <!-- <div class="icon_btn icon_btn_32" @click="$router.go(-1)"><img src="../../assets/img/close_check.svg" alt=""></div> -->
        </div>
        <div class="meta_down">
            <el-button plain icon="el-icon-download" class="el-button-width" size="small" @click="downLoadNull">无水印</el-button>
            <el-button plain icon="el-icon-download" class="el-button-width" size="small">有水印</el-button>
        </div>
        <div class="img_box">
            <el-carousel height="600px" :autoplay='false' @change='getIndex'>
                <el-carousel-item v-for="item in info.material" :key="item">
                    <div class="height_100 flexbox flexcenter flexjust">
                        <img :src="item.url" alt="" class="height_100">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            file_name: "",
            file_url:'',
            info: {},
        };
    },
    created() {
        this.getDetails();
    },
    methods: {
        //获取列表
        async getDetails() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/Demandszv2/pictureFind",
                {
                    id: this.$route.query.id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.info = res.data;
                this.file_name = res.data.material[0].name;
                this.file_url = res.data.material[0].url;
            }
        },

        // 下载无水印
        async downLoadNull() {
            const filename = this.file_name;
            const a = document.createElement("a");
            a.setAttribute("download", filename);
            a.setAttribute("target", "_blank");
            a.setAttribute("href", this.file_url);
            a.click();
        },

        getIndex(e) {
            this.file_name = this.info.material[e].name;
            this.file_url = this.info.material[e].url;
        },
    },
    components: {},
};
</script>


<style scoped>
.meta_head {
    height: 71px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}
.video_name {
    font-size: 16px;
    color: #17233d;
    margin: 0 20px;
}
.meta_down {
    padding: 20px;
}
.img_box {
    border-radius: 4px;
    background-color: rgba(165, 177, 209, 0.08);
    height: 100%;
    margin: 0 20px 20px;
    overflow: hidden;
    padding: 20px;
}
</style>

